<html>
<head>
    <title>Login and Register</title>
    <link rel="stylesheet" href="css/logregstyle.css">
    <script src="js/logreg.js"></script>
    <link rel="stylesheet"type="text/css" href="css/style2.css">
</head>
</html>
      <div class="show">
        <div style="position: fixed;right: 20px;top:10px;width: 100px;height: 50px;line-height: 50px;text-align: center;background-color: #ddd;border-radius: 15px;">
          <a href="index.html" style="list-style: none;color: black;text-decoration: none;">返回首页</a>
      </div>
          <div class="dis">
              <div class="button_box">
                  <div id="btn"></div>
                  <div style="display: flex;">
                    <button type="button" class="tog_btn" style="    width: 100px;" onClick="login()">Login</button>
                  <button type="button" class="tog_btn" style="    width: 100px;" onClick="register()">Register</button>
                  </div>
                  
              </div>
              <div class="fb_icon">
                  <img src="images/facebook.png">
              </div>
              <form id="login" class="input_group">
                <input type="text" class="input_field" name="emailaddress" placeholder="Email Address" required>
                <input type="password" class="input_field" name="password" placeholder="Enter Password" required>
                <input type="checkbox" class="check_box"><span>Keep me logged in</span>
                <button type="button" class="submit_btn" id="login-btn" style="margin-top: 30px;">Login</button>
              </form>
              <form id="register" class="input_group">
                    <input type="text" class="input_field" name="firstname" placeholder="First Name" required>
                    <input type="text" class="input_field" name="lastname"  placeholder="Last Name" required>
                    <input type="text" class="input_field" name="emailaddress" placeholder="Email Address" required>
                    <input type="password" class="input_field" name="password" placeholder="Enter Password" required>
                    <!-- <input type="checkbox" class="mcheck_box"><span>Male</span>
                    <input type="checkbox" class="fcheck_box"><span>Female</span> -->
                    <label><input name="gender" type="radio" value="Male" />Male </label> 
                    <label><input name="gender" type="radio" value="Female" />Female </label>   
                    <br> 
                    <input type="checkbox" class="ccheck_box"><span>I agree to the terms & conditions.</span>
                    <button type="button" class="submit_btn" id="submit-btn">Submit</button>
                  </form>
                 
          </div>
        

  
          <div class="footer">
            <div class="contain">
            <div class="col">
              <h1>About</h1>
              <ul>
                  <li><a href="ourstory.html">Our Story</a></li>
                <li>Sustainability</li>
                <li><a href="about.html">Our Founder</a></li>
              </ul>
            </div>
            <div class="col">
              <h1>Services</h1>
              <ul>
                  <li><a href="contact.html">Contact Us</a></li>
                  <li>Delivery</li>
                <li>Ordering & Payment</li>
                <li>FAQ</li>
                
          
              </ul>
            </div>
          
            <div class="col">
              <h1>Polices</h1>
                <li>Privacy Policy</li>
                <li>Term of Use</li>
              </ul>
            </div>
          
            <div class="col">
              <h1>      </h1>
              <ul>
                <li>Feedback</li>
              </ul>
            </div>
            <div class="col social">
              <h1>Social</h1>
              <ul>
                <li><img src="./images/ins.png" width="32" style="width: 32px;"></li>
                <li><img src="./images/twi.jpg" width="32" style="width: 32px;"></li>
                <li><img src="./images/fb.png" width="32" style="width: 32px;"></li>
              </ul>
            </div>
          <div class="clearfix"></div>
          </div>
          </div>
      </div>

      <script>
      var x = document.getElementById("login");
      var y = document.getElementById("register");
      var z = document.getElementById("btn");

      function register(){
          x.style.left = "-400px";
          y.style.left = "50px";
          z.style.left = "110px";
      }
      function login(){
          x.style.left = "50px";
          y.style.left = "450px";
          z.style.left = "0px";
      }
      </script>

      <script src="./api/axios.min.js"></script>
      <script src="./api/publicinfo.js"></script>
      <script src="./js/jquery.js"></script>
      <script src="./api/utils.js"></script>
      <script>
        $("#submit-btn").click(function(){

          let data = {};
          let value = $('#register').serializeArray();
          $.each(value, function (index, item) {
                      data[item.name] = item.value;   
                  });
          data.gender =  $("input[name='gender']:checked").val();
          post("/adduser",data).then(res=>{
            alert("REGISTER SUCCESS!")
          })
        })
        $("#login-btn").click(function(){
          let data = {};
          let value = $('#login').serializeArray();
          $.each(value, function (index, item) {
                      data[item.name] = item.value;
                  });
          post("/nlogin",data).then(res=>{
           
            // setLocalStorage("userName",data.emailaddress,15)
            // setLocalStorage("userData",res,15)
            //  window.location = "index.html"
            // console.log()
            // alert("登录成功！")
          
            if(res.data.status==1){
              alert("LOGIN SUCCESS!")
              setLocalStorage("userName",res.data.userInfo.lastname,15)
              setLocalStorage("userData",res,15)
               window.location = "index.html"
            }else{
              alert("USER NOT FOUND!")
            }


          })
        })
        
      </script>
</head>
</html>